<template>
	<view class="page">
		<view class="cu-custom " :style="[{height:CustomBar  + 'px'}]">
			<view class="cu-bar fixed flex align-items bg-white" :style="[{height:CustomBar+'px' }, {paddingTop:StatusBar+'px'}]">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back"></text>
				</view>
				<view class="search" :style="[{top:StatusBar+ 'px'}]">
					<!-- <text class="cuIcon-search icon"></text> -->
					<image class="icon" :src="baseUrl + '/static/search_for.png'" mode=""></image>
					<input placeholder="搜索订单" v-model="keyword" placeholder-style="color:#999999;" />
					<image v-if="keyword.length>0" class="close" @click="close" src="../../static/search/close.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="fixed" :style="[{top:CustomBar  + 'px'}]">
			<view class="box flex align-items justify-center">
				<view class="list flex">
					<view @click="changeOrder(0)" class="item" :class="{ active:orderIndex==0}">我的采购(456)</view>
					<view @click="changeOrder(1)" class="item" :class="{ active:orderIndex==1}">服务商采购(12)</view>
				</view>
			</view>
			<view class="category flex space-between align-items">
				<view @click="changeCurrent(0)" class="item" :class="{ active:current==0}">全部
				</view>
				<view @click="changeCurrent(1)" class="item" :class="{ active:current==1}">待付款
				</view>
				<view @click="changeCurrent(2)" class="item" :class="{ active:current==2}">待发货
				</view>
				<view @click="changeCurrent(3)" class="item" :class="{ active:current==3}">已完成
				</view>
				<view @click="changeCurrent(4)" class="item" :class="{ active:current==4}">已取消
				</view>
				<!-- <view @click="changeCurrent(5)" class="item" :class="{ active:current==5}">退款售后
				</view> -->
			</view>
			
		</view>
		
		
		<view class="empty" v-if='orderList.length==0'>
			<image class="noorder" src="../../static/mine/DD-WU@2x.png" mode=""></image>
			<view class="tips">暂没有相关订单哦~</view>
			<view class="go" @click="goHaowu">去逛逛</view>
		</view>
		<view v-else class="recommond">
			<view @click="goDetail(item.id)" class="goodsList" v-for="(item,index) in orderList" :key="index">
				<view class="order">
					<view class="num">订单编号{{item.order_number}}</view>
					<view v-if="item.status==-1" class="status">已取消</view>
					<view v-if="item.status==1" class="status">待付款</view>
					<view v-if="item.status==2" class="status">待发货</view>
					<view v-if="item.status==3" class="status">待收货</view>
					<view v-if="item.status==4" class="status">待评价</view>
					<view v-if="item.status==5" class="status">已完成</view>
					<view v-if="item.status==6" class="status">待退款</view>
					<view v-if="item.status==7" class="status">待退货退款</view>
					<view v-if="item.status==8" class="status">退款成功</view>
					<view v-if="item.status==9" class="status">退款退货成功</view>
				</view>
				<view class="flex">
					<image class="image" :src="item.imgurl" mode=""></image>
					<!-- <easy-loadimage mode="" class="image"
					    :scroll-top="scrollTop"
					    :image-src="item.imgurl"></easy-loadimage> -->
					
					<view class="right">
						<view class="title ellipsis">{{item.title}}</view>
						<view class="num">采购种类:{{item.cate}} </view>
						<view class="num">采购数量:{{item.amount}}</view>
					</view>
				</view>
				<view class="flex flex-end align-items" style="padding: 30upx 0;">
					<view class="total">应付金额 ¥ {{item.total}}</view>
					<view class="price">实付款 ¥ {{item.pay_money}}</view>
				</view>
				<view class="bottom">
					<!-- <view @click.stop="modifyAddr(item.id)" v-if="item.status==1||item.status==2" class="btn2">修改地址</view> -->
					<!-- <view @click.stop="viewWuliu(item.id)" v-if="item.is_show_wl==1" class="btn2">查看物流</view> -->
					<view @click.stop="handelOrder(item.id,1)" v-if="item.status==1" class="btn2">取消订单</view>
					<view @click.stop="payOrder(item.id,item)" v-if="item.status==1" class="btn2 red">去支付</view>
					<view @click.stop="handelOrder(item.id,2)" v-if="item.status==2&&item.type!=6" class="btn2">催发货</view>
					<!-- <view @click.stop="toUrl(item.id)" v-if="item.status==2||item.status==3" class="btn2">申请售后</view> -->
					<view @click.stop="handelOrder(item.id,3)" v-if="item.status==3" class="btn2 red">确认收货</view>
					<!-- <view @click.stop="toComment(item.id)" v-if="item.status==4" class="btn2 red">立即评价</view> -->
					<view @click.stop="handelOrder(item.id,5)" v-if="item.status==-1" style="width:auto;border: 0;" class="btn2 red">删除订单</view>
					<!-- <view v-if="item.status==6 ||item.status==7" class="btn2 red" style="width:auto;border: 0;">退款中</view> -->
					<!-- <view v-if="item.status==8 ||item.status==9" class="btn2" style="width:auto;border: 0;">退款成功</view> -->
					<view v-if="item.type!=6" @click.stop="buyAgain(item.id)" class="btn2 red">再来一单</view>
					<view  class="btn2 red">重新支付</view>
				</view>
				<view class="pintuan" @click.stop="toPintuan(item)" v-if="item.type==6">
					查看拼团详情
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				StatusBar: this.StatusBar,
				CustomBar:this.CustomBar,
				keyword:'',
				page: 1,
				orderList: [
					{
						title:'采购来源 河南萤石信息技术服务有限公司',
						order_number:'ZYB215646',
						amount:20,
						cate:2,
						pay_money:5644,
						total:5944,
						status:1,
						imgurl:this.$config.baseUrl + '/static/businessschool6.png'
					},
					{
						title:'采购来源 河南萤石信息技术服务有限公司',
						order_number:'ZYB215646',
						amount:20,
						cate:2,
						pay_money:5644,
						total:5944,
						status:2,
						imgurl:this.$config.baseUrl + '/static/businessschool6.png'
					},{
						title:'采购来源 河南萤石信息技术服务有限公司',
						order_number:'ZYB215646',
						amount:20,
						cate:3,
						pay_money:5644,
						total:5944,
						status:3,
						imgurl:this.$config.baseUrl + '/static/businessschool6.png'
					},
				],
				pageList: [],
				current: 0,  //状态
				orderIndex:0,  //订单类型
				openid: '',
			}
		},
		onLoad(options) {
			this.openid = uni.getStorageSync('openid') || '';
			this.current = options.index || 0;
		},
		onShow(){
			// this.loadData();
		},
		methods: {
			changeOrder(index){
				this.orderIndex=index;
				this.changeCurrent(0);
			},
			changeCurrent(index) {
				this.current = index;
				this.page = 1;
				// this.orderList = [];
				// this.loadData();
			},
			async loadData() {
				let obj = {
					openid: this.openid,
					page: this.page,
					status: this.current
				}
				this.$https.request('/wxapi/order/order_list', obj).then((res) => {
					if (res.error_cord == 200) {
						this.orderList = this.orderList.concat(res.data.order)||[];
						this.pageList = res.data.order||[];
						this.page+=1;
					}
				}).catch((res) => {
					console.log(res);
				});
				
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom: function() {
			if (this.pageList.length > 0) {
				this.loadData();
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.orderList = [];
			this.loadData();
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F2F2F2;
		min-height: 100vh;
	}
	.fixed{
		position: fixed;
		z-index: 999;
	}
	.empty{
		width: 100%;
		padding-top: 250upx;
		.noorder {
			width: 269upx;
			height: 241upx;
			display: block;
			margin: 0 auto;
		}
		.tips{
			// width: 100%;
			font-size:24upx;
			font-weight:500;
			color:rgba(138,138,138,1);
			text-align: center;
			margin: 14upx auto 150upx;
		}
		.go{
			width:429upx;
			height:90upx;
			background:rgba(254,206,84,1);
			border-radius:45upx;
			margin: 0 auto;
			background:rgba(254,206,84,1);
			box-shadow:0px 2upx 13upx 4upx rgba(223,99,17,0.44);;
			font-size:37upx;
			color:rgba(51,51,51,1);
			line-height:90upx;
			text-align: center;
		}
	}
	
	.search {
		width: 460upx;
		height: 70upx;
		background: #F4F4F4;
		border-radius: 35upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333 !important;
		.icon {
			display: block;
			width: 25upx;
			height: 25upx;
			font-size: 34upx;
			color: #AAAAAA;
		}

		input {
			flex: 1;
			padding-left: 20upx;
			font-size: 26upx;
			font-weight: 500;
			color: #333333;
		}

		.close {
			width: 31upx;
			height: 31upx;
			color: #999999;
			background: #FFFFFF;
			border-radius: 50%;
		}

		.search-btn {
			color: #333333;
			font-size: 30upx;
		}
	}
	.box{
		width: 750upx;
		height: 86upx;
		padding-top: 10upx;
		background: #FFFFFF;
		.list{
			width: 710upx;
			height: 66upx;
			background: #ED7200;
			border-radius: 33upx;
			padding: 4upx;
			.item{
				flex: 1;
				height: 58upx;
				line-height: 58upx;
				text-align: center;
				font-size: 28upx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.active{
				background: #FFFFFF;
				border-radius: 29upx;
				font-weight: bold;
				color: #ED7200;
			}
		}
		
	}
	.category {
		width: 100vw;
		// border-top: 1px solid #F9F9F9;
		height: 88upx;
		background: rgba(255, 255, 255, 1);
		padding: 0 30upx;
		// top: 94upx;
		.item {
			height: 88upx;
			line-height: 88upx;
			font-size: 28upx;
			color: #666666;
			overflow: visible;
			font-weight: 500;
			position: relative;
		}

		.line {
			position: absolute;
			right: 0;
			left: 0;
			bottom: 11upx;
			margin: auto;
			width: 33upx;
			height: 4upx;
			background: #ED7200;
			border-radius: 3upx;
		}

		.active {
			font-weight: bold;
			color: #221815;
			border-bottom: 6upx solid #ED7200;
		}
	}

	.recommond {
		padding: 0 20upx;
		// padding-top: 200upx;
		padding-top: 192upx;
		.goodsList {
			width: 100%;
			overflow: hidden;
			background: rgba(255, 255, 255, 1);
			margin-bottom: 20upx;
			border-radius: 10upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 9upx 0px rgba(0, 0, 0, 0.08);
			padding: 0 20upx 20upx;
			.order {
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.status{
					font-size: 24upx;
					font-weight: bold;
					color: #ED7200;
				}
				.num{
					font-size: 30upx;
					font-weight: bold;
					color: #333333;
				}
			}

			.image {
				width: 166upx;
				height: 166upx;
				border-radius: 10upx;
				// border: 1upx solid #EEEEEE;
				background: #F8F8F8;
				overflow: hidden;
			}
			
			.price {
				font-size: 28upx;
				font-weight: 500;
				color: #333333;
				line-height: 32upx;
				margin-left: 24upx;
			}
			.total{
				font-size: 28upx;
				font-weight: 500;
				color: #999999;
			}
			.right {
				flex: 1;
				padding-left: 20upx;
				.title {
					margin-bottom: 26upx;
					font-size: 26upx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.num {
					font-size: 24upx;
					font-weight: 500;
					color: #999999;
					line-height: 36upx;
				}

				

			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.btn2 {
				width: 148upx;
				height: 64upx;
				border: 1px solid #999999;
				border-radius: 32upx;
				font-size: 26upx;
				font-weight: 500;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				margin-left: 30upx;
			
			}

			.red {
				color: #FF3636;
				border: 1px solid #FF3636;
			}
		}
	}
</style>
